<template>
  <div class="cart">
    <div class="header">
        <p><van-icon name="arrow-left" @click="onback()" /></p>
        <h3>填写订单</h3>
    </div>
    <div class="userList">
        <div>姓名 {{user.text}}</div>
        <div>电话 {{user.phone}}</div>
    </div>
    <div class="main">
        <div class="main-top">
            <p>送达时间<span>今天11:30-12:00</span></p>
            <span>超过十分钟可获得积分补偿</span>
        </div>
        <div class="main-content">
            <div class="content-item">
                <p v-for="item in list" :key="item.id"><img :src="item.small_image" alt=""></p>
            </div>
            <span>共{{list.length}}件</span>
        </div>
    </div>
    <div class="footer">
        <div class="footer-top">
            <p>支付方式</p>
            <van-radio-group v-model="radio">
                <van-radio name="1" label-position="left" checked-color="#19b94d"><img src="../assets/img/order/wx.png" alt="">微信支付</van-radio>
                <van-radio name="2" label-position="left" checked-color="#19b94d"><img src="../assets/img/order/zfb.png" alt="">支付宝支付</van-radio>
                <van-radio name="3" label-position="left" checked-color="#19b94d"><img src="../assets/img/order/hb.png" alt="">花呗支付</van-radio>
            </van-radio-group>
        </div>
        <div class="footer-cen">
            <p>优惠卷<span>2张可用</span></p>
            <p>
                <span>使用800积分兑换</span>
                <van-switch v-model="checked" />
            </p>
            <p>￥8.00</p>
        </div>
        <div class="footer-bot">
            <p>商品金额<span>￥{{price/100}}</span></p>
            <p>配送费<span>0.00</span></p>
        </div>
        <van-submit-bar :price="price" button-text="提交订单" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name:"CarView",
    data(){
        return {
            list:[],
            radio:1,
            checked:false,
            price:0,
            user:{
                text:"",
                phone:"",
            }
        }
    },
    methods: {
        onback(){
            this.$router.back();
        },
        onSubmit(){
            Toast("加入订单");
        }
    },
    created(){
        if(localStorage.getItem("taken")){
            let obj = JSON.parse(localStorage.getItem("taken"))
            this.user=obj;
            console.log(this.user);
        }
        this.$store.state.list.forEach(item=> {
            if(item.stockout_reserved){
                this.list.push(item);
            }
        });
        this.price=this.$store.state.price;     
    }
}
</script>

<style lang="scss" scoped>
    .cart{
        font-size:.16rem;
        .header{
            font-size:.3rem;
            display:flex;
            justify-content: space-between;
            p{
                padding-left:.2rem;
                color:blue;
            }
            h3{
                width: 58%;
            }
        }
        .userList{
            height: 1.5rem;
            border-bottom:2px solid blue;
            padding-left:1rem;
            font-size:.3rem;
            display:flex;
            flex-direction: column;
            justify-content: space-around;
        }
        .main{
            .main-top{
                // width:100%;
                height: 1.5rem;
                border-bottom:1px solid #ccc;
                padding:0 .28rem;
                line-height:.7rem;
                p{
                    display: flex;
                    justify-content: space-between;
                    span{
                        color:#8f8f91;
                    }
                }
                span{
                    color:#8f8f91;
                }
            }
            .main-content{
                width: 100%;
                height: 1.5rem;
                display:flex;
                justify-content:space-between;
                border-bottom:.1px solid #ccc;
                .content-item{
                    width: 85%;
                    overflow-x: auto;
                    display:flex;
                    justify-content: flex-start;
                    p{
                        width: 1.5rem;
                        height: 1.5rem;
                        display:flex;
                        justify-content: center;
                        img{
                            width:1rem;
                            height:1rem;
                        }
                    } 
                }   
                span{
                    width:1rem;
                    height:1.5rem;
                    line-height:1.5rem;
                    font-size:.3rem;
                }      
            }
        }
        .footer{
            width: 100%;
            background:#f2f2f2;
            .footer-top{
                // font-size:.3rem;
                height: 2.4rem;
                background:#f2f2f2;
                p{  
                    line-height: 0.5rem;
                    color:#8f8f91;
                    text-indent:.26rem;
                }
                .van-radio-group{
                    height: 1.9rem;
                    line-height:.63rem;
                    padding:0 .26rem;
                    background:#fff;
                    .van-radio{
                        border-bottom:1px solid #ccc;
                        height: 0.63rem;
                        img{
                            width: 0.3rem;
                            height: 0.3rem;
                            margin-right:.1rem;
                        }
                    }
                }
                
            }
            .footer-cen{
                margin-top:.4rem;
                background:#fff;
                p{
                    padding:0 .26rem;
                    height: .55rem;
                    line-height:.55rem;
                    display:flex;
                    justify-content: space-between;
                }
            }
            .footer-bot{
                margin-top:.4rem;
                background:#fff;
                p{
                    padding:0 .26rem;
                    height: .55rem;
                    line-height:.55rem;
                    display:flex;
                    justify-content: space-between;
                }
            }
        }
    }
</style>